<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>御码科技</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 顶部导航 -->
  <div class="topNav">
    <div class="wrapper">
      <ul>
        <li><a href="./login.html">登录</a></li>
        <li class="line"></li>
        <li><a href="./regidter.html">免费注册</a></li>
        <li class="line"></li>
        <li><a href="javascropt:;">我的订单</a></li>
        <li class="line"></li>
        <li><a href="javascropt:;">会员中心</a></li>
        <li class="line"></li>
        <li><a href="javascropt:;">帮助中心</a></li>
        <li class="line"></li>
        <li><a href="javascropt:;">在线客服</a></li>
        <li class="line"></li>
        <li><a href="javascropt:;">手机版</a></li>
      </ul>
    </div>
  </div>
  <!-- 导航列表 -->
  <div class="NavList">
    <div class="wrapper">
      <div class="title">
        <span><img src="./images/LOGO@1x.png" alt=""></span>
        <a href="javascript:;">手机</a>
        <a href="javascript:;">电视</a>
        <a href="javascript:;">笔记本</a>
        <a href="javascript:;">平板</a>
        <a href="javascript:;">家电</a>
        <a href="javascript:;">路由器</a>
        <a href="javascript:;">服务中心</a>
        <a href="javascript:;">社区</a>
      </div>
      <div class="content">
        <div class="item">
          <ul>
            <li>
              <a href="#">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="javascript:;">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/js.webp" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./img/ds.webp" alt="">
              </a>
            </li>
        </div>
        <div class="item" style="display: none;">
          <ul>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/bjb.webp" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 焦点图 -->
  <div class="focusBox  wrapper">
    <!-- 焦点图 -->
    <div class="focusimg">
      <div class="item" style="opacity: 1;"><img src="./img/f1.jpg" alt=""></div>
      <div class="item" style="opacity: 0;"><img src="./img/f2.webp" alt=""></div>
      <div class="item" style="opacity: 0;"><img src="./img/f3.webp" alt=""></div>
      <div class="item" style="opacity: 0;"><img src="./img/f4.webp" alt=""></div>
      <div class="item" style="opacity: 0;"><img src="./img/f5.webp" alt=""></div>
      <div class="item" style="opacity: 0;"><img src="./img/f6.webp" alt=""></div>

      <div class="btns">
        <div class="leftBtn"> &lt; </div>
        <div class="rightBtn">&gt; </div>
      </div>
      <div class="dotteds">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <!-- 侧边导航 -->
    <ul class="asideli">
      <li>
        <span>手机</span>
        <span>></span>
        <img src="./img/s1.png" alt="">
      </li>
      <li>
        <span>电视</span>
        <span>></span>
        <img src="./img/s2.png" alt="">
      </li>
      <li>
        <span>家电</span>
        <span>></span>
        <img src="./img/s3.png" alt="">
      </li>
      <li>
        <span>平板 笔记本 显示器</span>
        <span>></span>
        <img src="./img/s4.png" alt="">
      </li>
      <li>
        <span>出戴 穿行</span>
        <span>></span>
        <img src="./img/s5.png" alt="">
      </li>
      <li>
        <span>耳机 音箱</span>
        <span>></span>
        <img src="./img/s1.png" alt="">
      </li>
      <li>
        <span>健康 儿童</span>
        <span>></span>
        <img src="./img/s2.png" alt="">
      </li>
      <li>
        <span>生活 箱包</span>
        <span>></span>
        <img src="./img/s3.png" alt="">
      </li>
      <li>
        <span>智能 路由器</span>
        <span>></span>
        <img src="./img/s4.png" alt="">
      </li>
      <li>
        <span>电源 配件</span>
        <span>></span>
        <img src="./img/s5.png" alt="">
      </li>

    </ul>
  </div>

  <div class="maincontent wrapper">
    <div class="contentitem">
      <h1>新鲜好物</h1>
      <ul>
        <li>
          <img src="./uploads/new_goods_1.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
        <li>
          <img src="./uploads/new_goods_2.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
        <li>
          <img src="./uploads/new_goods_3.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
        <li>
          <img src="./uploads/new_goods_4.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
      </ul>
    </div>

    <div class="contentitem">
      <h1>人气推荐</h1>
      <ul>
        <li>
          <img src="./uploads/popular_1.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
        <li>
          <img src="./uploads/popular_2.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
        <li>
          <img src="./uploads/popular_3.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
        <li>
          <img src="./uploads/popular_4.jpg" alt="">
          <p>
            <span>睿米无线吸尘器F8</span>
            <span>899</span>
          </p>
        </li>
      </ul>
    </div>

    <div class="contentitem">
      <h1>热门品牌</h1>
      <ul>
        <li><img src="./uploads/brand_goods_1.jpg" alt=""></li>
        <li><img src="./uploads/brand_goods_2.jpg" alt=""></li>
        <li><img src="./uploads/brand_goods_3.jpg" alt=""></li>
        <li><img src="./uploads/brand_goods_4.jpg" alt=""></li>
      </ul>
    </div>

    <div class="rightaside">
      <span class="active">新鲜好物</span>
      <span>人气推荐</span>
      <span>热门品牌</span>
    </div>
  </div>

  <!-- 底部区域 -->
  <div class="footer">
    <div class="wrapper">
      <div class="top_footer">
        <a href="javascript::">价格亲民</a>
        <a href="javascript::">物流快捷</a>
        <a href="javascript::">品质新鲜</a>
      </div>
      <div class="bot_footer">
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商业合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </div>
    </div>
  </div>

  <script>
    // 获取用户登录信息
    var res = localStorage.getItem("longinName");
    // 功能1: 显示登录用户信息
    (function () {
      if (res) {
        var l1 = document.querySelector(".topNav li:nth-child(1)");
        l1.innerHTML = `<a href="javascript:;">欢迎${res}</a>"`;
        var l2 = document.querySelector(".topNav li:nth-child(3)");
        l2.innerHTML = `<a href="javascript:;">退出登录</a>`;

        // 点击退出登录
        l2.onclick = function () {
          localStorage.removeItem("longinName");
          this.innerHTML = `<a href="./regidter.html">免费注册</a>`;
          l1.innerHTML = `<a href="./login.html">登录</a>"`;
        }
      }



    })();

    // 功能2: 鼠标悬停导航列表显示二级菜单
    (function () {
      var navList = document.querySelectorAll(".NavList .title a");
      var content = document.querySelector(".NavList .content");
      var content_items = document.querySelectorAll(".NavList .content .item");
      navList.forEach(function (item, index) {
        // 鼠标进入
        item.onmouseenter = function () {
          // 1. 父容器高度设置为141px 
          content.style.height = '141px';
          // 2. 父容器overflow属性设置为 visible
          content.style.overflow = "visible";
          for (var i = 0; i < content_items.length; i++) {
            content_items[i].style.display = "none";
          }
          // 获取对应的内容显示,其他内容隐藏
          content_items[index].style.display = "block";
        }
        // 鼠标离开
        item.onmouseleave = function () {
          content.style.height = '0px';
          content.style.overflow = "hidden";
        }
      })
    })();

    // 功能3: 鼠标进入左侧导航列表显示对应的图片
    (function(){
       var lis =  document.querySelectorAll(".asideli li");
       var imgs = document.querySelectorAll(".asideli img");
       lis.forEach(function(item){
           item.onmouseenter = function() {
               for(var i =0; i < imgs.length; i++) {
                imgs[i].style.display = "none";
               }
               this.lastElementChild.style.display = "block";
           }
           item.onmouseleave = function() {
            this.lastElementChild.style.display = "none";
           }
       });
    })();

    // 功能4: 轮播图
    (function(){
        var items = document.querySelectorAll('.focusimg .item');
        var dotteds = document.querySelectorAll(".dotteds span");
        var timeID;
        // 点击下一页
        var next = document.querySelector(".rightBtn");
        var pageIndex = 0;
        next.onclick = function() {
            pageIndex++;
            if(pageIndex == items.length) {
               pageIndex = 0;
            }
            // 排他思想
            items.forEach(function(item,index){
               item.style.opacity = 0;
            })
            items[pageIndex].style.opacity = 1;
            
            // 排他思想
            document.querySelector(".dotteds .active").className = "";
            // 设置小圆点样式
            dotteds[pageIndex].className = "active";
        }

        var prev = document.querySelector(".leftBtn");
        // 点击上一页
        prev.onclick = function() {
            pageIndex--;
            if(pageIndex == -1) {
               pageIndex = items.length - 1;
            }
            // 排他思想
            items.forEach(function(item){
               item.style.opacity = 0;
            })
            items[pageIndex].style.opacity = 1;


             // 排他思想
             document.querySelector(".dotteds .active").className = "";
            // 设置小圆点样式
            dotteds[pageIndex].className = "active";
        }


        // 点击小圆点
        dotteds.forEach(function(item, index){
            item.onclick = function() {
                // 设置当前小圆点样式
                document.querySelector(".dotteds .active").className="";
                this.className = "active";
                pageIndex = index;

                // 排他思想
                items.forEach(function(item,index){
                  item.style.opacity = 0;
                })
                items[pageIndex].style.opacity = 1;
            }
        });

        // 自动播放
        function autoplay() { 
           timeID = setInterval(function(){
               next.click();
           }, 3000);
        }
        autoplay();

        // 鼠标进入停止自动播放
        var focusBox   = document.querySelector(".focusBox");
        focusBox.onmouseenter = function() {
            clearInterval(timeID);
        }
        focusBox.onmouseleave = function() {
          timeID = setInterval(function(){
               next.click();
           }, 3000);
        }
    })();
    
    // 功能5: 电梯导航
    (function(){
       var btns = document.querySelectorAll(".rightaside span");
       var contentitem = document.querySelectorAll(".contentitem");
       btns.forEach(function(item,index){
           item.onclick = function() {
               document.querySelector(".rightaside .active").className = "";
               this.className = "active";

               // 获取对应内容对应的距离设置给滚动条
               var lg = contentitem[index].offsetTop;
               document.documentElement.scrollTop = lg;
           }
       });

       // 滚动条
       window.onscroll = function() {
          var lg = document.documentElement.scrollTop;
          contentitem.forEach(function(item,index){
              if(lg >= item.offsetTop) {
                 document.querySelector(".rightaside .active").className = "";
                 btns[index].className = "active";
              }
          });
       }


    })();
  </script>
</body>

</html>